<script setup lang="ts">
import { reactive, ref } from 'vue'
import { getStreetList } from '@/api/street'
import { submitApply } from '@/api/apply'
import { ElMessage, ElMessageBox } from 'element-plus'
import { MapLocation } from '@element-plus/icons-vue'

import MapContainer from '@/components/MapContainer.vue'
import { RouterLink, RouterView, useRouter } from 'vue-router'

const router = useRouter()

const options = ref()
const tempGeom = ref({
  lng: null,
  lat: null
})

const getStreets = () => {
  getStreetList().then((res) => {
    if (res.code === 0) {
      options.value = res.data.records
    } else {
      ElMessage.error(res.msg)
    }
  }).catch((error) => {
    console.error(error)
    ElMessage.error('获取街道列表失败')
  })
}

const deleteGeom = () => {
  form.lng = null
  form.lat = null
  tempGeom.value.lng = null
  tempGeom.value.lat = null
  ElMessage.success('已清除选点')
}

const onSubmit = (data) => {
  submitApply(data).then((res) => {
    if (res.code === 0) {
      ElMessage.success('申请提交成功')
      router.push({ path: '/user/list' })
    } else {
      ElMessage.error(res.msg)
    }
  }).catch((error) => {
    console.error(error)
    ElMessage.error('提交申请失败')
  })
}

// do not use same name with ref
const form = reactive({
  code: null,
  streetId: null,
  clazzId: null,
  remark: null,
  lng: null,
  lat: null
})

const mapVisible = ref(false)

const jumpintoUserList = () => {
  router.push({ path: '/user/list' })
}

const showMap = () => {
  mapVisible.value = true;
}

const handleLocation = (lng, lat) => {
  tempGeom.value.lng = lng
  tempGeom.value.lat = lat
}

const saveGeom = () => {
  if (tempGeom.value.lng && tempGeom.value.lat) {
    form.lng = tempGeom.value.lng
    form.lat = tempGeom.value.lat
    mapVisible.value = false
  } else {
    ElMessage.error('请先选择地图上的位置')
  }
}

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定要关闭吗？选择的地点将不会被保存。')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

getStreets()
</script>

<template>
  <div>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="门牌号">
        <el-input v-model="form.code" placeholder="请输入号码" type="number" min="1" />
      </el-form-item>
      <el-form-item label="门牌地址">
        <el-select v-model="form.streetId" placeholder="请选择地址">
          <el-option v-for="item in options" :key="item.id" :label="item.division.name + ' ' + item.name"
            :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="门牌种类">
        <el-radio-group v-model="form.clazzId">
          <el-radio value="1" name="clazzId">
            居民楼
          </el-radio>
          <el-radio value="2" name="clazzId">
            商家
          </el-radio>
          <el-radio value="3" name="clazzId">
            公共设施
          </el-radio>
          <el-radio value="4" name="clazzId">
            其他
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" type="textarea" />
      </el-form-item>
      <el-form-item label="地图选点">
        <el-button type="primary" @click="showMap" :icon="MapLocation">显示地图</el-button>
        <span v-if="form.lng && form.lat" style="margin-left: 10px">
          已选经纬度：{{ form.lng.toFixed(6) }}, {{ form.lat.toFixed(6) }}
        </span>
        <el-button type="danger" @click="deleteGeom" :disabled="!form.lng || !form.lat">清除选点</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(form)">提交申请</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

    <el-dialog v-model="mapVisible" title="地图选点" width="500" :before-close="handleClose">
      <map-container v-if="mapVisible" style="width: 100%; height: 400px; border: 1px solid #dcdfe6; border-radius: 4px"
        :lng="form.lng" :lat="form.lat" @location-selected="handleLocation" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="saveGeom">
            确认
          </el-button>
          <el-button @click="mapVisible = false">取消</el-button>
        </div>
      </template>

    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
/* Chrome / Edge / Safari */
:deep(input[type='number'])::-webkit-outer-spin-button,
:deep(input[type='number'])::-webkit-inner-spin-button {
  -webkit-appearance: none;
  /* 去掉箭头 */
  margin: 0;
  /* 防止留下空白 */
}

/* Firefox */
:deep(input[type='number']) {
  appearance: textfield;
  /* 把 number 当普通文本框渲染 */
}
</style>